<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

	<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/main.css') }}">
	<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/mine.css') }}">
	
	<script src="{{ url_for('static',filename='js/jquery-1.12.4.js') }}"></script>
	<script src="{{ url_for('static',filename='js/jquery-ui.min.js') }}"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

	<script src="{{ url_for('static',filename='js/main.js') }}"></script>

</head>

<body>
	<div class="alldiv">
		<div class="left_navigation" id="left_nav"></div>
		<script>
			$(left_nav).load('/Public/leftNav')
		</script>

		<div class="righthtml">
			
				<img src="{{ url_for('static',filename='image/company.png') }}" width="100%" height="200">
				<h2>Input your new vital signs.</h2>

			<div>
				<div class="row" style="margin-top:20pt;">
					<div class="col-lg-5">
					  <div class="input-group">
						<span class="input-group-addon">Systolic Pressure (sbp)</span> <!--140-->
						<input type="number" class="form-control" aria-label="..." id ='sbp' placeholder="90 ~ 159">
						<span class="input-group-addon">mmHg</span>
					  </div><!-- /input-group -->
					</div><!-- /.col-lg-6 -->

					<span id ='sbpSpan' class="col-lg-1" ></span>
					
					<div class="col-lg-5">
					  <div class="input-group">
						<span class="input-group-addon">Diastolic Pressure (dbp)</span><!--90-->
						<input type="number" class="form-control" aria-label="..." id ='dbp' placeholder="60 ~ 99">
						<span class="input-group-addon">mmHg</span>	
					  </div><!-- /input-group -->
					</div><!-- /.col-lg-6 -->

					<span id ='dbpSpan' class="col-lg-1" ></span>
				</div><!-- /.row -->

				<div class="row" style="margin-top:20pt;">
					<div class="col-lg-5">
					  <div class="input-group">
						<span class="input-group-addon">Glucose Level</span>
						<input type="number" class="form-control" aria-label="..." id ='glucose' placeholder="3.9 ~ 6.1"><!--3.9-7.8-->
						<span class="input-group-addon">mmol/l</span>
					  </div><!-- /input-group -->
					</div><!-- /.col-lg-6 -->

					<span id ='glucoseSpan' class="col-lg-1" ></span>
					
					<div class="col-lg-5">
					  <div class="input-group">
						<span class="input-group-addon">Cholesterol</span> 
						<input type="number" class="form-control" aria-label="..." id ='cholesterol' placeholder="1.8 ~ 3.4"><!--1.8-3.4-->
						<span class="input-group-addon">mmol/l</span>
					  </div><!-- /input-group -->
					</div><!-- /.col-lg-6 -->

					<span id ='cholesterolSpan' class="col-lg-1" ></span>

				</div><!-- /.row -->

				<div class="row" style="margin-top:20pt;">
					<div class="col-lg-5">
					  <div class="input-group">
						<span class="input-group-addon">Arterial Oxygen Saturation (SaO2)</span>
						<input type="number" class="form-control" aria-label="..."  id ='SaO2' placeholder="95 ~ 100"><!--95-100-->
						<span class="input-group-addon">%</span>
					  </div><!-- /input-group -->
					</div><!-- /.col-lg-6 -->

					<span id ='SaO2Span' class="col-lg-1" ></span>
				</div><!-- /.row -->

				
			</div>
			<div style="width: 100%; text-align: center; margin-top: 40pt;">
				<button class="btn btn-primary" style="width: 100pt;" onclick="updateSigns();" id ='submitSigns'>Submit</button>
			</div>

		</div>
	</div>
	
</body>
<script>
	// 初始化为1，正确后加起来为0
var sbpFlag=1
var dbpFlag=1
var glucoseFlag=1
var cholesterolFlag=1
var SaO2Flag=1


	function updateSigns() {
		
		if( !($("#sbp").val() && $("#dbp").val() && $("#glucose").val() && $("#cholesterol").val() && $("#SaO2").val())){
			alert('please fill all the input boxes!')
			return;
		}

		/*
		if ((sbpFlag+dbpFlag+glucoseFlag+cholesterolFlag+SaO2Flag)>0){
			alert('please fill with values in ranges!')
			return;
		}*/

		//alert("submitting...")
		$("#submitSigns").text("Waiting...")
		$("#submitSigns").attr("disabled", true);
		$.ajax({
			url: "/VitalSigns/updateSigns", 
			type: "POST",  
			data: {
				"sbp": $("#sbp").val(),
				"dbp": $("#dbp").val(),
				"glucose": $("#glucose").val(),
				"cholesterol": $("#cholesterol").val(),
				"SaO2": $("#SaO2").val(),
			},
			success: function (result) {
				if (result.message == "success!") {
					$("#submitSigns").text("Submit")
					alert("Submit Succeed")	
					location.href="/VitalSigns/";
				}
				else {
					alert(result.message)
				}
			}
		});
	
}

$("#sbp").blur(function(){
	var value = parseFloat( $("#sbp").val() );
	console.log( value)
	if(isNaN(value) || value <90 || value >159 ){
		$("#sbpSpan").text("Warn")
		$("#sbpSpan").css({color:"red"})
		sbpFlag =1;
	}else{
		$("#sbpSpan").text("OK")
		$("#sbpSpan").css({color:"green"})
		sbpFlag =0;
	}
});

$("#dbp").blur(function(){
	var value = parseFloat( $("#dbp").val() );
	console.log( value)
	if(isNaN(value) || value <60 || value >99 ){
		$("#dbpSpan").text("Warn")
		$("#dbpSpan").css({color:"red"})
		dbpFlag =1;
	}else{
		$("#dbpSpan").text("OK")
		$("#dbpSpan").css({color:"green"})
		dbpFlag =0;
	}
});

$("#glucose").blur(function(){
	var value = parseFloat( $("#glucose").val() );
	console.log( value)
	if(isNaN(value) || value <3.9 || value >7.8 ){
		$("#glucoseSpan").text("Warn")
		$("#glucoseSpan").css({color:"red"})
		glucoseFlag =1;
	}else{
		$("#glucoseSpan").text("OK")
		$("#glucoseSpan").css({color:"green"})
		glucoseFlag =0;
	}
});


$("#cholesterol").blur(function(){
	var value = parseFloat( $("#cholesterol").val() );
	console.log( value)
	if(isNaN(value) || value <1.8 || value >3.4 ){
		$("#cholesterolSpan").text("Warn")
		$("#cholesterolSpan").css({color:"red"})
		cholesterolFlag =1;
	}else{
		$("#cholesterolSpan").text("OK")
		$("#cholesterolSpan").css({color:"green"})
		cholesterolFlag =0;
	}
});

$("#SaO2").blur(function(){
	var value = parseFloat( $("#SaO2").val() );
	console.log( value)
	if(isNaN(value) || value <95 || value >100 ){
		$("#SaO2Span").text("Warn")
		$("#SaO2Span").css({color:"red"})
		SaO2Flag =1;
	}else{
		$("#SaO2Span").text("OK")
		$("#SaO2Span").css({color:"green"})
		SaO2Flag =0;
	}
});

</script>
</html>